<template>
	<view class="index-content" v-if="loadEnd">
		<!-- 内容 -->
		<view class="detail-content">
			<!-- 帖子内容 -->
			<detail :show-data="userInfo" @likePosts="likePosts" @collections="collections"></detail>
			<!-- 分割线 -->
			<image style="padding:0 26rpx 20rpx;" src="/static/forum/line.png" mode="widthFix"></image>
			<!-- 评论内容 -->
			<comment :show-data="postsDetails"></comment>
		</view>
		<!-- 发表评论 -->
		<view class="bottom" v-if="hide != 'true'">
			<view class="discuss">
				<input type="text" placeholder="输入你想说的话" v-model="comments"  @confirm="setComment" placeholder-style="font-size:28rpx;color: #C4C4C4;padding-left:50rpx;" />
				<button @click="setComment">发送</button>
			</view>
			<view class="safe-padding"></view>
		</view>
	</view>
</template>

<script>
import detail from '@/pages/Component/forum/component/main-list/detail.vue'
import comment from '@/pages/Component/forum/component/main-list/comment.vue'
import ikz from '@/pages/Common/tools.js'
export default {
	components: {
		detail,
		comment,
	},
	data() {
		return {
			loadEnd:false,
			userInfo: {}, //用户信息
			postsDetails: [], //评论信息
			fatherid: 0,
			comments: '',
			hide: false,
		}
	},
	onLoad(options) {
		this.fatherid = options.id
		this.hide = options.hide
		// this.userInfo = uni.getStorageSync("user_info")
		this.getDetail()
		this.getPostsDetail()
	},
	methods: {
		// 获取帖子详情
		getDetail() {
			uni.showLoading({ mask: true })
			let path = '/xyb/posts/posts/detail'
			let data = {
				id: this.fatherid,
				token: uni.getStorageSync('local_user_session'),
			}
			ikz.request(path, data, res => {
				if (res.statusCode == 200) {
					this.userInfo = res.data.data
				}
				this.loadEnd = true
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
		},
		// 获取帖子评论详情
		getPostsDetail() {
			let path = '/xyb/posts/posts/posts_details'
			let data = {
				id: this.fatherid,
			}
			ikz.request(path, data, res => {
				if (res.statusCode == 200) {
					this.postsDetails = res.data.data
				}
				this.loadEnd = true
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
		},
		
		// 发表评论
		setComment() {
			let path = '/xyb/posts/posts/comment'
			let data = {
				posts_id: this.fatherid,
				token: uni.getStorageSync('local_user_session'),
				content: this.comments,
				agent_id: uni.getStorageSync('default_agent').id||''
			}
			ikz.request(path, data, res => {
				if (res.statusCode == 200) {
					this.getPostsDetail()
					this.getDetail()
					this.comments = ''
				}
			})
		},
		// 点赞或取消点赞帖子
		// 点赞或取消点赞帖子
		likePosts(id, status) {
			let path = ''
			if (status == 0) {
				path = '/xyb/posts/posts/give'
			} else {
				path = '/xyb/posts/posts/give_del'
			}
			let data = {
				token: uni.getStorageSync('local_user_session'),
				posts_id: id,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					let title = ''
					if (status == 0) {
						title = '点赞成功'
						this.userInfo.give_status = 1
						this.userInfo.give++
					} else {
						title = '取消点赞'
						this.userInfo.give_status = 0
						this.userInfo.give--
					}
					uni.showToast({
						title,
						icon: 'none',
					})
					let pages = getCurrentPages() //获取所有页面栈实例列表
					let prevPage = pages[pages.length - 2] //上一页页面实例
					if (prevPage.$vm.postsList) {
						prevPage.$vm.postsList.forEach(el => {
							if (el.id == this.fatherid) {
								if (el.give_status == 0) {
									el.give_status = 1
									el.give++
								} else {
									el.give_status = 0
									el.give--
								}
							}
						})
					}
					if (prevPage.$vm.postList) {
						prevPage.$vm.postList.forEach(el => {
							if (el.id == this.fatherid) {
								if (el.give_status == 0) {
									el.give_status = 1
									el.give++
								} else {
									el.give_status = 0
									el.give--
								}
							}
						})
					}
					if (prevPage.$vm.dataList) {
						prevPage.$vm.dataList.forEach(el => {
							if (el.id == this.fatherid) {
								if (el.give_status == 0) {
									el.give_status = 1
									el.give++
								} else {
									el.give_status = 0
									el.give--
								}
							}
						})
					}
				}
			})
		},
		// 收藏或取消收藏帖子
		collections(id, status) {
			let path = ''
			if (status == 0) {
				path = '/xyb/posts/posts/collection'
			} else {
				path = '/xyb/posts/posts/collection_del'
			}
			let data = {
				token: uni.getStorageSync('local_user_session'),
				posts_id: id,
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					let title = ''
					if (status == 0) {
						title = '收藏成功'
						this.userInfo.collection_status = 1
						this.userInfo.collection++
					} else {
						title = '取消收藏'
						this.userInfo.collection_status = 0
						this.userInfo.collection--
					}
					console.log('值', this.userInfo)
					uni.showToast({
						title,
						icon: 'none',
					})
					let pages = getCurrentPages() //获取所有页面栈实例列表
					let prevPage = pages[pages.length - 2] //上一页页面实例
					if (prevPage.$vm.dataList) {
						prevPage.$vm.dataList.forEach(el => {
							if (el.id == this.fatherid) {
								if (el.collection_status == 0) {
									el.collection_status = 1
									el.collection++
								} else {
									el.collection_status = 0
									el.collection--
								}
							}
						})
					}
					if (prevPage.$vm.postsList) {
						prevPage.$vm.postsList.forEach(el => {
							if (el.id == this.fatherid) {
								if (el.collection_status == 0) {
									el.collection_status = 1
									el.collection++
								} else {
									el.collection_status = 0
									el.collection--
								}
							}
						})
					}
					if (prevPage.$vm.postList) {
						prevPage.$vm.postList.forEach(el => {
							if (el.id == this.fatherid) {
								if (el.collection_status == 0) {
									el.collection_status = 1
									el.collection++
								} else {
									el.collection_status = 0
									el.collection--
								}
							}
						})
					}
				}
			})
		},
	},
}
</script>

<style lang="scss">
.index-content {
	padding: 26rpx 26rpx 106rpx 26rpx;

	.detail-content {
		padding-bottom: 106rpx;

		.line {
			position: relative;
			/* width: 100%; */
			height: 1rpx;
			margin: 0 26rpx 32rpx;
			background-color: #e6e6e6;

			&::after {
				content: '';
				display: block;
				width: 0;
				height: 0;
				border: 8px solid transparent;
				border-bottom-color: #cccccc;
				position: absolute;
				left: 80%;
				top: 0;
				margin-top: -32rpx;
			}

			&::before {
				content: '';
				display: block;
				width: 0;
				height: 0;
				border: 8px solid transparent;
				border-bottom-color: #fff;
				position: absolute;
				left: 80%;
				top: 0;
				z-index: 2;
				margin-top: -30rpx;
			}
		}
	}

	.bottom {
		background: #ffffff;
		padding: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		/* height: 100rpx; */

		.discuss {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 48rpx;
			overflow: hidden;
			background: #f8f8f8;

			> input {
				flex: 1;
				height: 100%;
				padding-left: 25rpx;
				padding-right: 30rpx;
			}

			button {
				width: 188rpx;
				height: 100rpx;
				font-size: 36rpx;
				color: #ffffff;
				background: #fb7a26;
				line-height: 100rpx;
				text-align: center;
				border-radius: 48rpx;
			}

			button::after {
				border: none;
			}
		}
	}
}
</style>
